<template>
  <view class="product">
    <view class="content":style="{width: w}">
      <image :src="item.img" :style="{ width: w, height:w }" @tap="goDetails" />
      <view class="goods-info">
        <view class="title" @tap="goDetails">
          <view class="tit">
						<Tag :text="item.shop?.type==1?'个人':'商家'" :bgc="item.shop?.type==1?'#FF9B05':'#FF3B1E'" /> 
						{{item.name}} 
					</view>
        </view>
        <view class="tips" @tap="goDetails"> {{item.msg}} </view>
        <view class="info" @tap="goDetails">
          <view class=""> {{item.distance}} | 配送约￥{{item.delivery_money}} </view>
          <view class="mark"> {{item.comment_score}}分</view>
        </view>
        <view class="corporation" @tap="goShop"> {{item.shop?.name}} </view>
        <view class="prices">
          <view class="price"> 
            <text class="fh">￥</text>
            <text>{{item.price=='0.00'?'面议':item.price}}</text>
          </view>
          <view class="xl"> 销量{{item.sales}} </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
	import { computed } from 'vue';
	import Tag from './Tag.vue';
  const { safeArea } = uni.getSystemInfoSync()
	const props = defineProps({
		item: {
			type: Object,
			default: {
			category_id: 119, // 分类id
			comment_num: 0,
			comment_score: "5.0",
			delivery_money: 13, // 配送费
			distance: "7.3km",
			id: 1,
			img: "http://waimai.weishijie.shop/uploads/images/20230808/08047f68a3ec4597fd150b3d90db3e9b.jpg",
			latitude: "34.81",
			longitude: "113.50",
			msg: "商品描述商品描述",
			multi: "false",
			name: "RUBBIT夏末新品 miu系条纹针织小衫 立体棉翻领polo短袖上衣女",
			original_price: "399.00",
			price: "299.00",
			sales: 0,
			shop: {
				shop_id: 2,
				type: 1,
				name: '老魏蔬菜店个人申请',
				longitude: '113.58',
				latitude: '34.81',
				detail_address: "河南省郑州市高新区中原广告园",
				distance: "7.3km",
				help_mobile: "166****5554",
				help_mobile_old: "16692175554",
				sales: 0,
				site: "",
			},
			shop_id: 2,
			show_num: 1000,
			sku: "S241120669",
			skuInfo: {
				active: "1",
				cost_price: null,
				create_time: 1732113904,
				del: 0,
				give_price: "0.00",
				goods_id: 1,
				id: 2,
				original_price: "399.00",
				price: "299.00",
				sale: 0,
				shop_id: 2,
				sku: "S241120669",
				spece_id: "",
				spece_value_id: "0",
				spece_value_title: "",
				spu: "G241120242",
				stock: 100,
				thumb: "http://waimai.weishijie.shop/uploads/images/20230808/08047f68a3ec4597fd150b3d90db3e9b.jpg",
				virtual_sales: 0,
				weight: 0
			},
			spu: "G241120242",
			stock: 100,
		}
		}
	})
  const w = computed(() => {
    return (safeArea.width - 33) / 2 + 'px'
  })
  const goDetails = () => {
    uni.navigateTo({
      url: `/pages/productDetails/productDetails?spu=${props.item?.spu}`
    })
  }
  const goShop = () => {
    uni.navigateTo({
      url: `/pages/shop/shop?shop_id=${props.item?.shop_id}`
    })
  }
</script>

<style lang="scss" scoped>
  .product {
    break-inside: avoid;
		margin-bottom: 10px;
    .content {
      border-radius: 10px;
      background-color: #fff;
      overflow: hidden;
      margin-bottom: 9px;
      .goods-info {
        padding: 8px 7px;
        box-sizing: border-box;
        .title {
          margin-bottom: 5px;
          .tag {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 24px;
            height: 14px;
            font-weight: 400;
            font-size: 10px;
            color: #FFFFFF;
            text-align: center;
            background-color: #FA2C19;
            border-radius: 2px;
            margin-right: 5px;
          }
          .tit {
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            line-height: 17px;
          }
        }
        .tips {
          color: #999999;
          font-size: 11px;
          font-weight: 400;
          line-height: 13px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
        }
        .info {
          display: flex;
          justify-content: space-between;
          margin: 6px 0;
          font-weight: 400;
          font-size: 11px;
          color: #999999;
          line-height: 13px;
          .mark {
            color: #FF3B1E;
          }
        }
        .corporation {
          font-weight: 400;
          font-size: 11px;
          color: #D68C1C;
          line-height: 13px;
          margin-bottom: 6px;
        }
        .prices {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .price {
            font-weight: 500;
            font-size: 16px;
            color: #FF3B1E;
            .fh {
              font-size: 12px
            }
          }
          .xl {
            font-weight: 400;
            font-size: 11px;
            color: #999999;
          }
        }
      }
    }
  }
</style>